@charset "UTF-8";
/**
 * @authors Albert
 * @date    2016-12-21 10:50:24
 */
.smart_main {
    width: 100%;
    height: 720px;
    background-image: url('http://img01.bigwe.com/bigwe_common/smart_tag_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.content {   
    width: 100%;
    height: 100%;
    background-image: url('http://img01.bigwe.com/bigwe_common/smart_tag_banner.png');
    background-repeat: no-repeat;
    background-position: center top;
}

.smart_title {  
    text-align: center;
    color: white;
    padding-top: 5em;
}

.smart_title > .tit_t {   
    font-size: 36px;
    letter-spacing: 5px;
}

.smart_title > .tit_b {   
    margin-top: 2em;
    letter-spacing: 2px;
}

.smart_tag {  
  width: 580px;
  position: absolute;
  left: 50%;
  top: 50%;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  background: white;
}

.smart_tag > button {
  border-radius: 0px;
}

.copy_label[disabled] {
  border: 1px solid #d2d2d2;
  color: #9c9c9c;
}

.tag_left {
  height: 340px;
  margin: -140px 0 0 -560px;
  z-index: 100;
  padding: 20px;
}

.tag_right {
  height: 320px;
  margin: -100px 0 0 -20px;
  padding: 20px 20px 20px 55px;
}

.smart_tag > p {
  border-left: 6px solid #44B549;
  padding-left: 6px;
  font-size: 16px;
}

.tag_left_text {
  width: 100%;
  height: 13.5pc;
    line-height: 1.7pc;
    resize: none;
    border: none;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
    padding: 12px 0;
  margin: 12px 0; 
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.tag_left_text::-webkit-scrollbar {
  width: 10px; height: 10px; background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
.tag_left_text::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
.tag_left_text::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba(149,149,149,0.4);
}

.tag_list {
  height: 12.5pc;
  border-top: 1px solid #e5e5e5;
    padding: 12px 0;
  margin: 12px 0; 
}

.tag_list > span {
    line-height: 25px;
    padding: 0 12px;
    margin: 0 10px 10px 0;
    background: #7dabff;
    border-radius: 4px;
    color: white;
    float: left;
}

.animated_up {
  -moz-animation: fadeInUp 1.5s; /* Firefox */
  -webkit-animation: fadeInUp 1.5s; /* Safari and Chrome */
  -o-animation: fadeInUp 1.5s; /* Opera */
  animation: fadeInUp 1.5s;

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated_down {
  -moz-animation: fadeInDown 1.5s; /* Firefox */
  -webkit-animation: fadeInDown 1.5s; /* Safari and Chrome */
  -o-animation: fadeInDown 1.5s; /* Opera */
  animation: fadeInDown 1.5s;

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {    
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInUp {
  from {    
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  from {    
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes fadeInUp {
  from {    
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes fadeInDown {
  from {    
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInDown {
  from {    
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInDown {
  from {    
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes fadeInDown {
  from {    
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
} 